<template>
	<view v-if="myInfo==''">
		<xbd-zwnz marginTop='300'></xbd-zwnz>
	</view>

	<view v-else class="detail">
		<view class="content">
			<xbd-color-title :image="require('@/static/image/notice/icon.svg')" :grade="from.grade">
				<template #grade>
					<view class='content_text'>{{myInfo.item}}</view>
				</template>
				<template #content>
					<xbd-row :title="'风险等级'" :color="'#A0A7B8'">
						<template>
							<view class="row">
								<text :style="{ color: gradeColor(myInfo.level) }">{{ myInfo.level }}</text>
							</view>
						</template>
					</xbd-row>
					<xbd-row :title="'预警对象'" :color="'#A0A7B8'">
						<template>
							<view v-if="myInfo.is_send==false">
								<view v-if="showSH =='true'" class="row">
									<view class="tag" v-for="(item,index) in myInfo.target_name " :key="index">
										<text class="name">{{item.name}}</text>
										<text v-if=" item.state && (timeFormat(myInfo.time) < nowDate)&& myInfo.audit_state == 'successed'" class="status">已收到</text>
										<text class="status2" v-if="!item.state && (timeFormat(myInfo.time) < nowDate)&& myInfo.audit_state == 'successed' ">未读</text>
									</view>
								</view>
								<view v-else>
									<text class="names" v-for="(item,index) in myInfo.target_name ">{{item.name}}</text>
								</view>
							</view>
							<view v-else >
								<view v-if="showSH =='true'" class="row">
									<view class="tag" v-for="(item,index) in myInfo.target_name " :key="index">
										<text class="name">{{item.name}}</text>
										<text v-if=" item.state && myInfo.audit_state == 'successed'"
											class="status">已收到</text>
										<text v-if="!item.state && myInfo.audit_state == 'successed'"
											class="status2">未读</text>
									</view>
								</view>
								<view v-else>
									<text class="names" v-for="(item,index) in myInfo.target_name ">{{item.name}}</text>
								</view>
							</view>
						</template>
					</xbd-row>
					<xbd-row :title="'预警事项'" :color="'#A0A7B8'">
						<template>
							<view class="row">
								<text>{{myInfo.item}}</text>
							</view>
						</template>
					</xbd-row>
					<xbd-row :title="'预警意见'" :color="'#A0A7B8'">
						<template>
							<view class="row">
								<text>{{myInfo.view}}</text>
							</view>
						</template>
					</xbd-row>
					<xbd-row :title="'防控措施'" :color="'#A0A7B8'">
						<template>
							<view class="row">
								<text>{{myInfo.measures}}</text>
							</view>
						</template>
					</xbd-row>
					<xbd-row :title="'预警时间'" :color="'#A0A7B8'">
						<template>
							<view class="row">
								<text>{{myInfo.time | timeFormat('YYYY-MM-DD HH:mm')}}</text>
							</view>
						</template>
					</xbd-row>

					<xbd-row v-if="showPor =='false'" :title="'提交人'" :color="'#A0A7B8'">
						<template>
							<view class="row">
								<text>{{myInfo.submit_person}}</text>
							</view>
						</template>
					</xbd-row>
					<xbd-row v-if="showPor =='false'" :title="'提交时间'" :color="'#A0A7B8'">
						<template>
							<view class="row">
								<text>{{myInfo.submit_time | timeFormat('YYYY-MM-DD HH:mm')}}</text>
							</view>
						</template>
					</xbd-row>
				</template>
			</xbd-color-title>
			<image v-if="myInfo.is_templete && showSH=='true'" class="imgs" src="@/static/image/templa.png"></image>
		</view>
		<view class="bottom" v-if="showSH=='true' && myInfo.audit_state!=='wait'">
			<image v-if="myInfo.audit_state === 'successed'" class='img' src="@/static/image/notice/record/adopt.svg" />
			<image v-if="myInfo.audit_state === 'refused'" class='img' src="@/static/image/notice/record/refuse.svg" />
			<view class="tag">
				审核人
			</view>
			<view class="text">
				{{userInfo.name}}
			</view>
			<view class="tag">
				审核意见
			</view>
			<view class="text">
				{{myInfo.audit_view||'-'}}
			</view>
			<view class="tag">
				审核时间
			</view>
			<view class="text">
				{{myInfo.audit_time | timeFormat('YYYY-MM-DD HH:mm')}}
			</view>
		</view>
		<xbd-button v-if="myInfo.audit_state==='successed' && !myInfo.is_templete" text="再次预警" @clickBtn="submit()">
		</xbd-button>
		<xbd-popup :isShow="showDialog" @dialogConfirm="dialogConfirm" @dialogCancel="dialogCancel" content="将撤回所有已提交内容,确定取消提交？"
			cancelText="取消" confirmText="确定"></xbd-popup>
		<xbd-button v-if="myInfo.audit_state==='wait'" text="取消提交" @clickBtn="cancel()"></xbd-button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		Prevention
	} from '@/api/index.js';
	const dayjs = require("dayjs");
	export default {
		data() {
			const nowDate = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
			return {
				nowDate: nowDate,
				showPor: true,
				showDialog: false,
				flag: true,
				showSH: '',
				id: '',
				myInfo: '',
				o: {
					audit_view: ''
				}
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			dialogConfirm() {
				console.log('确认')
				this.flag = false
				this.getCancel()
				this.showDialog = false
			},
			dialogCancel() {
				this.showDialog = false
			},
			timeFormat(time) {
				return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
			},
			cancel() {
				this.showDialog = true
				console.log('取消上报')
			},
			async getCancel() {
				const res = await Prevention.postRecordCancel(this.id)
				if (!res.success) {
					this.flag = true
				} else {
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1500)
				}
				this.$showToast(res.msg);
			},
			submit() {
				console.log('再次预警')
				uni.redirectTo({
					url: `/pages/notice/warn/warn?id=${this.id}`
				});
			},
			gradeColor(val) {
				let res = "";
				switch (val) {
					case "低":
						res = "#2E73FC";
						break;
					case "中":
						res = "orange";
						break;
					case "高":
						res = "red";
						break;
				}
				return res;
			},
			async init() {
				const res = await Prevention.getWarnDetail(this.id)
				if(res.success){
					this.myInfo = res.data
				}else{
					this.$showToast(res.msg);
				}
				console.log(res)
			}
		},
		async onLoad(res) {
			this.showPor = res.por
			this.showSH = res.msg
			console.log(res)
			this.id = res.id
			await this.init()
		}
	};
</script>

<style lang="scss" scoped>
	@import "@/static/common.scss";

	.imgs {
		width: 92rpx;
		height: 44rpx;
		position: absolute;
		top: 0;
		right: 0;
	}

	.content_text {
		width: 600rpx;
		white-space: pre-line !important;
		word-break: break-all !important;
		word-wrap: break-word;
	}

	.detail {
		@include compress;

		.content {
			background-color: #fff;
			@include compress;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
			position: relative;

			.row {
				//   height: 32rpx;
				margin: 20rpx 0 10rpx 0;
				font-size: 30rpx !important;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				white-space: pre-line !important;
				word-break: break-all !important;
				word-wrap: break-word ;

				.tag {
					// width: 33.3%;
					margin-right: 20rpx;
					margin-bottom: 20rpx;

					.name {
						font-size: 30rpx !important;
						color: #000623;
					}

					.status {
						// width: 104rpx;
						height: 32rpx;
						text-align: center;
						line-height: 32rpx;
						font-size: 22rpx;
						color: #8890a5 !important;
						background-color: #ebeef5;
						padding: 3rpx 6rpx;
						border-radius: 4rpx;
						margin: 0 0 0 20rpx;
					}

					.status2 {
						padding: 4rpx 6rpx;
						// text-align: center;
						line-height: 32rpx;
						font-size: 22rpx;
						color: #FCB94F !important;
						background: rgba(252, 185, 79, 0.15);
						border-radius: 4rpx;
						margin: 0 0 0 20rpx;
					}
				}
			}

			.temp {
				width: 92rpx;
				height: 44rpx;
				background-color: #2a84e0;
				color: #fff;
				font-size: 26rpx;
				text-indent: 25rpx;
				line-height: 44rpx;
				border-radius: 0 12rpx 12rpx 40rpx;
				position: absolute;
				top: 0;
				right: 0;
			}
		}

		.names {
			line-height: 62rpx;
			font-size: 30rpx !important;
			color: #000623;
			margin-right: 20rpx;
			margin-top: 20rpx;
		}

		.bottom {
			position: relative;
			background-color: #fff;
			@include compress;
			border-radius: 12rpx;

			.tag {
				color: #A0A7B8;
				font-size: 26rpx;

				margin-bottom: 20rpx;

			}

			.text {
				margin-bottom: 20rpx;
				white-space: pre-line !important;
				word-break: break-all !important;
				word-wrap: break-word;

				.name {
					margin-right: 20rpx;
					font-size: 30rpx !important;
					color: #000623;
				}

				.text-color {
					margin-left: 20rpx;
					padding: 3rpx 6rpx;
					background: rgba(252, 185, 79, 0.15);
					border-radius: 4rpx;
					color: #FCB94F;
				}
			}

			.textarea {
				min-height: 160rpx;
				padding: 20rpx 30rpx;
				font-size: 30rpx;
				border: 2rpx solid #EBEEF5;
				margin-bottom: 20rpx;
				border-radius: 8rpx;
			}

			.row {
				display: flex;
				white-space: pre-line !important;
				word-break: break-all !important;
				word-wrap: break-word ;
				// justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;
			}

			.img {
				position: absolute;
				top: 60rpx;
				right: 30rpx;
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
</style>
